<template>
	<view>
		<view class="container-title">
			<Title>排行榜</Title>
			<!-- <u-icon class="more-icon" name="arrow-right" @click="showMore"></u-icon> -->
		</view>
		<view class="ranking-container">
			<view class="ranking-item" v-for="item in 4" :key="item" @click="showMore">
				<img src="@/assets/img/ranking.jpg" />
				<view>
					<text class="title">飙升榜</text>
					<text v-for="item in 3" :key="item" class="info">
						<text class="num">{{ item }}</text>
						<text>我在屋顶等雨也等你-王源</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods: {
			showMore() {
				uni.navigateTo({
					url: '/pages/music/songSheet?type=123'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-container {
		display: flex;
		flex-wrap: wrap;

		.ranking-item {
			display: inline-block;
			width: 46%;
			background-color: #efefef;
			margin-right: 3%;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			min-height: 126px;
			border-radius: 4px;
			view{
				height: 100%;
				padding: 10px;
			}

			img {
				height: 100%;
				margin-right: 20px;
				border-radius: 4px;
			}

			.title {
				font-size: 20px;
				font-weight: bold;
				line-height: 35px;
			}

			.info {
				display: block;
				line-height: 26px;
				color: #777;
				font-size: 15px;

				.num {
					display: inline-block;
					margin-right: 10px;
				}
			}
		}
	}
</style>
